<template>
	<view class="bd1">
		<view class="book-lists-items">
			<view class="book-lists-item" v-for="(item,index) in getBookMsg" :key="item.id" @click="gotoReadBook(item)"
				v-if="item.bookName.includes(searchKeyword)">
				<image class="book-lists-item-pic" :src="item.bookImg"></image>
				<view class="book-lists-item-name">{{item.bookName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBookByMsg, //获取书籍信息
	} from '@/config/api.js'
	export default {
		props: {
			filters: {
				type: Object,
				default: {}
			},
			searchKeyword: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				getBookMsg: {}
			}
		},
		created() {

			this.getBookMsgFun()

		},
		methods: {
			gotoReadBook(item) {
				var item1 = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/booksPages/booksPages?item=' + item1
				})
			},
			async getBookMsgFun() {
				try {
					this.getBookMsg.permission = 0
					const res = await getBookByMsg(this.getBookMsg)

					console.log("getBookByMsg==>" + JSON.stringify(res))
					this.getBookMsg = res
				} catch (e) {
					//TODO handle the exceptio
				}
			}
		}
	}
</script>

<style scoped>
	.book-lists-item-name {
		font-size: 0.9rem;
		font-weight: bold;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0.5rem;
	}

	.book-lists-item-pic {
		margin-top: 15rpx;
		width: 300rpx;
		height: 280rpx;
	}

	.book-lists-items {
		text-align: center;
		width: 100%;

		height: auto;

		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 16rpx;
		flex-wrap: wrap;
		border-radius: 20rpx;
	}

	.book-lists-item {
		width: 350rpx;
		/* height: 400rpx; */
		border-radius: 30rpx;
		box-sizing: border-box;

		height: auto;
		display: inline-block;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		box-shadow: lightgray 0 0 5rpx 2rpx;

		background-color: white;
	}

	.book-lists {
		margin-top: 20rpx;
		width: 100%;
		flex: 1;
		height: auto;


		background-color: rgb(248, 248, 248);
	}

	.book-kinds-item-pic {

		width: 80%;
		height: 80%;
	}

	.book-kinds-item {
		font-size: 0.8em;
		margin: 40rpx;
		flex: 1;
		height: 100%;

		box-shadow: 1rpx;
	}

	.book-kinds {

		margin: 0 auto;
		height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;


	}

	.bd1 {
		width: 100%;
		height: 100%;

		display: flex;
		flex-direction: column;
		padding: 16rpx 0;
		box-sizing: border-box;

		/* background: linear-gradient(to right,rgb(231,240,255) 50%,rgb(255,239,235) 50%); */
		width: 100%;
		height: 100%;
		letter-spacing: 0.1rem;
		font-weight: 400;
		display: flex;
		flex-direction: column;
		background-color: rgba(243, 242, 238, 0.1);
		/* background: linear-gradient(135deg, #f8f9fd, #fafbfb); */
		/* background: linear-gradient(to right,rgb(231,240,255) 0%,rgb(255,255,255) 49%,rgb(255,255,255) 50%,rgb(255,239,235) 100%); */
	}
</style>